<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            box-sizing: border-box;
        }
        
        html,
        body,
        #app {
            width: 100%;
            height: 100%;
        }
        
        #app {
            display: flex;
            flex-direction: column;
        }
        
        header {
            width: 100%;
            height: 60px;
            background-color: #fcc;
            text-align: center;
            line-height: 60px;
        }
        
        main {
            flex: 1;
            overflow-y: scroll;
        }
        
        dl {
            width: 100%;
            height: 150px;
            display: flex;
            align-items: center;
            padding: 0 10px;
        }
        
        dl img {
            width: 100px;
            height: 100px;
            margin: 0 10px;
        }
        
        dl .num {
            width: 30px;
            height: 30px;
        }
        
        dl button {
            width: 30px;
            height: 30px;
        }
        
        footer b {
            flex: 1;
            padding: 0 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <header>购物车</header>
        <main>
            <dl v-for='(item,index) in list'>
                <input type="checkbox" v-model="item.checked" />
                <img :src="item.img" alt="">
                <div>
                    <h3>{{item.text}}</h3>
                    <p>
                        <b>单价：￥{{item.price}}</b>
                        <b>总价：￥{{item.price*item.num}}</b>
                    </p>
                    <div>
                        <button @click="reduceNum(item)" :disabled='item.num<=1'>-</button>
                        <input type="text" v-model="item.num" class="num">
                        <button @click="item.num++">+</button>
                    </div>
                </div>
            </dl>
        </main>
        <footer>
            <input type="checkbox" @change="allCheckFn" v-model="allCheck">
            <label>全选</label>
            <b>合计：{{totalPrice}}</b>
            <button :disabled='!btnDisable'>去结算：{{totalNum}}</button>
        </footer>
    </div>
    <script src="./vue.js"></script>
    <script src="./mock.js"></script>
    <script>
        const data = Mock.mock({
            "list|6": [{
                img: '@image(100x100,@color)',
                text: '@ctitle',
                "price|10-100": 0,
                checked: false,
                id: '@id',
                num: 1
            }]
        })
        const vue = new Vue({
            el: '#app',
            data: {
                list: data.list,
                totalPrice: 0,
                totalNum: 0,
                allCheck: false,
                btnDisable: false,
            },
            watch: {
                list: {
                    handler: function(newValue, oldValue) {
                        this.allCheck = newValue.every((value) => {
                                return value.checked
                            }),
                            this.totalPrice = 0,
                            this.totalNum = 0,
                            newValue.forEach(v => {
                                if (v.checked) {
                                    this.totalPrice += v.price * v.num,
                                        this.totalNum += v.num
                                }
                            })
                        this.btnDisable = newValue.some(v => {
                            return v.checked
                        })
                    },
                    deep: true,
                },

            },

            methods: {
                reduceNum(item) {
                    item.num--;
                    if (item.num < 1) {
                        item.num = 1
                    }
                },
                allCheckFn() {
                    this.list.forEach((item) => {
                        item.checked = this.allCheck
                    })
                },

            }
        })
    </script>
</body>

</html>